<template>
  <view class="">
    <!-- 商品列表部分 -->
    <!-- 等级(1为甄选，2优选，3为一级品，4为2二级品，5为三级品) -->
    <view class="product-list">
      <view v-for="(item, index) in productList" :key="index" class="product-item" @click="goToProductDetail(item)">
        <!-- <image :src="item.image" class="product-image" lazy-load :lazy-load-margin="0" /> -->
        <view class="product-image-wrapper">
          <image :src="item.image" class="product-image" lazy-load :lazy-load-margin="0" />
          <view v-if="item.inventory <= 0" class="sold-out-overlay">已售罄</view>
        </view>
        <view class="product-info">
          <!-- <text class="product-title">{{ this.grade(item.grade) }} {{ item.goodsName }}</text> -->
          <text class="product-title">{{ item.goodsName }}</text>
          <text class="product-content">{{ item.details }}</text>

          <view class="price-cart">
            <view class="price-buttom">
              <text class="proudct-sales">销量:{{ item.sales }}</text>
              <!-- Display both the regular price and member price -->
              <!-- <text class="product-price">¥{{ item.money }} 会员价:¥{{ item.userMoney }}</text> -->
              <text class="product-price">¥{{ item.money }}</text>
            </view>

            <!--   <button class="cart-button" @click.stop="addToCart(item)">
              加入购物车
            </button> -->
          </view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
  import {
    getFootPrint,
    InsertFootPrint
  } from "../../api/footprint/footprint.js";
  export default {
    onShow() {

      this.getFootPrint();
    },

    data() {
      return {
        productList: [],
      }
    },

    methods: {
      getFootPrint() {
        const userId = uni.getStorageSync('userInfo').userId;
        // console.log(userId);
        getFootPrint(userId).then(res => {
          console.log(res.data.data.historyfood);
          this.productList = [...res.data.data.historyfood] || []
          //  console.log(this.productList);
        })
      },
      goToProductDetail(item) {
        //判断库存
        if (item.inventory <= 0) {
          return;
        }
        // 导航到商品详情页并传递所选商品信息
        uni.navigateTo({
          url: `/pages/goodDetail/goodDetail?id=${
          item.id
        }&goodsName=${encodeURIComponent(item.goodsName)}&money=${
          item.money
        }&image=${encodeURIComponent(item.image)}&grade=${
          item.grade
        }&details=${encodeURIComponent(item.details)}&inventory=${
          item.inventory
        }&sales=${item.sales}`,
        });
      },



    }
  }
</script>

<style>
  /* 商品列表样式 */
  .product-list {
    padding: 15px;
  }

  .product-item {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    padding: 15px;
  }

  .product-image {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    margin-right: 15px;
  }

  .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .product-title {
    margin-bottom: 5px;
  }

  .proudct-sales,
  .product-content {
    color: #999;
    margin-bottom: 10px;
  }

  .product-content {
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
  }

  .price-cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .product-price,
  .member-price {
    font-size: 14px;
    color: #04be02;
  }

  .cart-button {
    background-color: #04be02;
    color: #fff;
    border: none;
    margin: 5px 5px;
    border-radius: 5px;
    font-size: 14px;
  }

  .product-image-wrapper {
    position: relative;
  }

  .sold-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 8px;
    /* 与图片保持一致 */
  }

  .price-buttom {
    display: flex;
    flex-direction: column;
  }
</style>